<template>
    <div class="tmpl">
        <!--1.0 实现商品的轮播图subimgsilder.vue-->
        <subImgSilder class="subimgsilder" :imagelist="imagelist"></subImgSilder>   <!--因为是驼峰命名法，所以支持小写<sub-img-silder></sub-img-silder>-->
        <!--2.0 实现商品购买区域-->
        <div class="sell">
            <h4>{{goodsInfoData.title}}</h4>
            <div class="sellprice">
                市场价：<s>￥{{goodsInfoData.sell_price}}</s>  销售价：<span>￥{{goodsInfoData.market_price}}</span>
            </div>
            <div class="count">
                <!--放数量的组件-->
                购买数量：<subNumber class="subnumber" v-on:count="getcount"></subNumber>
                <!--动画小球-->
                <transition v-on:before-enter="beforeEnter"
                            v-on:enter="enter"
                            v-on:after-enter="afterEnter">
                    <div v-show="isShow" class="ball"></div>
                </transition>
            </div>
            <div class="leftBtn">
                <mt-button type="primary" size="small">立即购买</mt-button>
            </div>
            <div class="rightBtn">
                <mt-button type="danger" size="small" @click="toShopData">加入购物车</mt-button>
            </div>
        </div>
        <!--3.0 商品参数区域-->
        <div class="params">
            <h6>商品参数</h6>
            <ul>
                <li>商品货号:{{goodsInfoData.goods_no}}</li>
                <li>库存情况:{{goodsInfoData.stock_quantity}}件</li>
                <li>上架时间:{{goodsInfoData.add_time | fmtdate('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <!--4.0 商品的图文信息描述（使用一个新组goodsesc.vue件来完成）- 5.0 商品的评论区域subcomment.vue-->
        <div class="footer">
            <mt-button @click="desc" type="primary" size="large" plain>图文介绍</mt-button>
            <mt-button @click="comment" class="mt1" type="danger" size="large" plain>商品评论</mt-button>
        </div>
    </div>
</template>
<style scoped>
    .subimgsilder,.sell,.params,.footer{
        border:1px solid rgba(92,92,92,0.3);
        border-radius: 5px;
        margin:5px;
        padding:5px;
    }
    /*2.0 商品的购买区域*/
    .sell{
        padding-bottom: 20px;
    }
    .sell h4{
        color:#0094ff;
        border-bottom: 1px solid rgba(92,92,92,0.3);
        padding:10px 0;
    }
    .sell .sellprice,.sell .count{
        padding:10px;
    }
    .sell .sellprice s{
        margin-right: 20px;
    }
    .sell .sellprice span{
        color: red;
        font-size: 18px;
    }
    .rightBtn,.leftBtn{
        display: inline-block;
        width:48%;
        text-align: center;
    }
    .count{
        position: relative;
    }
    .ball{
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 12px;
        left:113px;
        /*display: none;*/
        /*display: block; 这两个display只能显示和隐藏*/
        /*opacity:0; !*可以从0-1的渐进隐藏与显示*!*/
        transition: all .5s cubic-bezier(.35,-0.44,.83,.67); /*动画过度时间*/
        z-index: 50;
    }

    /*组件区域*/
    .subnumber{
        display: inline-block;
    }
    /*3.0商品参数区域*/
    .params h6{
        padding:5px;
        border-bottom: 1px solid rgba(92,92,92,0.3);
    }
    .params li{
        list-style: none;
        margin-left: 20px;
    }
    /*4.0底部*/
    .mt1{
        margin-top: 20px;
    }
</style>
<script>
    //1.01 导入组件 subimgsilder.vue
    import subImgSilder from '../SubComp/subImgSlider.vue';
    import  common from '../../kits/common.js';

    //2.0.1 导入subnumber.vue就是那个点击+-变化数字的那个组件
    import subNumber from '../SubComp/subNumber.vue';

    //6.0.2 注册commonVue.js  (app.vue和goodsinfo.vue不是父子关系所以不能直接传值，要通过一个公用vue传值)
    import  {vueObj} from '../../kits/commonVue.js';

//    注册localstorage.js
    import  {setItem,getItem} from '../../kits/localStorageHelper.js';

    export default{
        data(){
            return{
                isShow:false,
                goodsCount:1,  //商品的数量
                imagelist:[],  //1.0.2这个变量存储的是当前商品的轮播图片数组
                goodsInfoData:{}//2.0.2这个变量存储的是当前商品的描述信息
            }
        },
        created(){
            this.getImageList()  //1.0.4 调用方法
            this.getGoodsInfo();  //2.0.0000调用ajax请求商品描述信息
        },
        methods:{
            //1.0.3 定义获取轮播图数据的方法
            getImageList(){
                let id = this.$route.params.id;  //获取到商品id
                let url = common.apihost + '/api/getthumimages/' + id;
                this.$http.get(url).then(
                    res=>{
                        //由于api返回的地址没有带域名所以要补上
//                        this.imagelist = res.body.message;
                        res.body.message.forEach(item=>{
                            item.img = common.imghost + item.src;
                        });
                        this.imagelist = res.body.message;
                    },
                    res=>{
                        console.log('商品轮播图图片请求失败');
                    }
                );
            },
            //2.0.0 定义一个方法用来接收子组件传过来的值
            getcount(obj){
//                console.info('count' + count);
                this.goodsCount = obj.count;
            },
            //2.0.3定义一个方法用来获取商品的介绍信息
            getGoodsInfo(){
                let id = this.$route.params.id;
                let url = common.apihost + '/api/goods/getinfo/' + id;
                this.$http.get(url).then(
                    res=>{
                        this.goodsInfoData = res.body.message[0];
                    },
                    res=>{
                        console.log('获取商品介绍信息失败');
                    }
                );
            },
            //5.0.1 商品评论
            comment(){
                //1.0 获取到商品id
                let id = this.$route.params.id;

                //2.0 跳转到商品评论组件comment.vue 编程式路由  这里的name要写main.js中注册那里填的name
                this.$router.push({name:'goodsComment',params:{id:id}});
            },
            //4.0.1 定义商品图文显示
            desc(){
                let id = this.$route.params.id;  //*********************注意$route和$router的使用，别混淆了**********************************************

                this.$router.push({name:'goodsDesc',params:{id:id}});
            },
            //6.0.1 实现购物数据的通知
            toShopData(){
                //1.0发送通知
                vueObj.$emit('shopData',this.goodsCount);   //接下来步骤详看App.vue 的script

                //2.0将商品数据存储到localstorage
                let id = this.$route.params.id;
                setItem({goodsid:id,count:this.goodsCount})

//                3.0出现动画效果  在都买数量里面放一个隐藏的小球
                this.isShow = !this.isShow;
            },
            //7.0 定义小球动画
            beforeEnter(el){
                //表示小球的动画开始
                //通常我们使用translate3d来开启硬件加速，提高动画的流畅度
                el.style.transform = 'translate3d(0,0,0)';
                console.log('1')
            },
            enter(el,done){
                //注意点：想要有动画的过程，就必须保证页面是在刷新的
                var offset = el.offsetWidth;  //设置这句话就能保证小球实时移动，不停的获取位置
                //表示动画进入到最后状态
                el.style.transform = 'translate3d(115px,327px,0)';
                done();
                console.log('2')
            },
            afterEnter(el){
                //表示小球的动画结束状态,要将控制小球显示和隐藏的变量isShow重置
                this.isShow = !this.isShow;
                console.log('3')
            }
        },
        components:{
            subImgSilder,   //注册轮播图组件
            subNumber       //注册加减变化数字组件
        }
    }
</script>